<template>
  <div id="BaiduMap">

    <el-button type="primary" @click="showMapDialog">查看地图</el-button>
    
    <el-dialog 
      title="地图定位" 
      :visible.sync="mapDialogVisible" 
      width="800px"
      @opened="initMap"
    >
      <div id="mapContainer" style="width: 100%; height: 400px;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable no-undef */
export default {
    name:"BaiduMap",
  data() {
    return {
      mapDialogVisible: false,
      map: null
    }
  },
  methods: {
    showMapDialog() {
      this.mapDialogVisible = true;
    },
    initMap() {
      this.$nextTick(() => {
        this.map = new BMap.Map('mapContainer');
        const point = new BMap.Point(116.404, 39.915);
        this.map.centerAndZoom(point, 15);

      });
    }
  }
}
</script>